<script setup>
import { ref } from 'vue';
import axios from 'axios';

const id = ref(1); // 查找的id
const student = ref({}); // getData和update所用的模型

// 创建一个自定义配置的axios实例
const myAxios = axios.create({
    baseURL: 'https://localhost:7002',
    // timeout: 6000,
    // headers后面的对象，不是列表哦
    headers: {
        'RegisterNo': 'JD-TEST',
        'Timestamp': new Date().getTime()
    },

});

// 根据id获取学生信息
const getDataById = () => {
    myAxios.get('/api/students/getstudent', {
        params: {
            id: id.value
        }
    }).then(res => {
        student.value = res.data;
    }).catch(error => {
        console.log(error.message); // axios提示
        console.log(error.response); // 返回结果
    })
}
// 更新学生数据
const updateData = () => {
    myAxios.post('/api/students/update',
        {
            ...student.value
        })
        .then(res => {
            console.log(res.data);
        }).catch(error => {
            console.log(error);
        })
}
</script>

<template>
    <div>
        <div>
            <input type="text" v-model="id"><button @click="getDataById">get请求获取id为{{ id }}的学生</button>
        </div>
        <div v-if="student.id">
            <input v-model="student.id" type="hidden" /><br />
            <input v-model="student.name" type="text" /><br />
            <input v-model="student.age" type="text" /><br />
            <input v-model="student.gender" type="text" /><br />
            <button @click="updateData">修改id为{{ student.id }}的信息</button>
        </div>
    </div>
</template>